<template>
  <div>
    <Modal v-model='showStatus' title='批量设置' @on-ok='ok' @on-cancel='cancel'>
      <Form :model='localItem' :label-width='80' ref='table'>
        <FormItem label='请求类型'>
          <Select v-model='localItem.method' style='width:200px'>
            <Option value='POST'>POST</Option>
            <Option value='GET'>GET</Option>
            <Option value='DELETE'>DELETE</Option>
            <Option value='UPDATE'>UPDATE</Option>
          </Select>
        </FormItem>
        <FormItem label='资源类型'>
          <Select v-model='localItem.type' style='width:200px'>
            <Option v-for='item in types' :value='item.value' :key='item.value'
            >{{ item.label }}
            </Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    selectData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    isShow() {
      this.showStatus = this.isShow
    }
  },
  data() {
    return {
      showStatus: false,
      types: [
        {
          value: 1,
          label: '接口'
        },
        {
          value: 2,
          label: '按钮'
        }
      ],
      localItem: {
        method: '',
        type: null
      }
    }
  },
  methods: {
    ok() {
      this.$refs.table.resetFields()
      this.$emit('changeEvent', false)
      const result = this.selectData.map((item) => {
        item.type = this.localItem.type
        item.method = this.localItem.method
        return item
      })
      this.$emit('editEvent', result)
    },
    cancel() {
      this.$refs.table.resetFields()
      this.$emit('changeEvent', false)
      this.$Message.info('取消设置！')
    }
  }
}
</script>
